<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise的回顾</title>
  </head>
  <body>
    <script>
      // Promise 对象(new Promise)用于管理一个异步操作的最终完成(或失败)及其结果值
      // 1. 使用: Promise本质上是一个构造函数, 使用时需要new
      // 2. 同步: 代码从上到下依次执行的过程
      // 3. 异步: 此处代码不会阻塞代码继续向下, 而是开一个线程去执行异步任务(定时器/计时器/ajax)
      //       异步特点:原地会有一个回调函数 - 接收成功/失败的结果和值
      // 4. Promise如何检测成功/失败的结果
      // (1): let p = new Promise((resolve, reject) => { // 异步代码 })
      // (2): 异步成功手动resolve()  =>  p.then((res)=>{}) "then()里的回调函数执行"
      // (3): 异步失败手动reject()   =>  p.catch((err)=>{}) "catch()里的回调函数执行"

      // 5. Promise的三种状态(概念不是具体的代码)
      // (1): let p = new Promise() -    (pending - 待定)    (异步任务需要耗时)(没有异步结果)
      // (2): 异步成功手动resolve()  -  p的状态(fulfilled - 兑现) - 异步任务成功了 -> then()里代码
      // (3): 异步失败手动reject()   -  p的状态(rejected - 拒绝) - 异步任务失败了 -> catch()里代码

      // Promise进阶:
      // 1. 无论then() / catch() 原地会得到一个全新的Promise对象
      // (1): then()方法原地返回一个全新的Promise对象
      //   let p = new Promise((resolve, reject) =>
      // setTimeout(() => resolve(123), 1000)
      //   )
      // let newP = p.then()
      // console.log(newP) // 全新的Promise对象
      // (2): catch()方法原地返回一个全新的Promise对象
      //   let newP = p.catch()
      //   console.log(newP) // 全新的Promise对象

      // 2. then()里回调函数return值 / catch()里回调函数return值 - 传给下一个then函数 (重要)
      // (1): 异步成功的时候
    //   let p = new Promise((resolve, reject) => {
    //       setTimeout(() => {
    //           resolve('成功了')
    //       }, 2000)
    //   })
    //   let newP = p.then(res => {
    //       console.log(res); // '成功了'
    //       return 100;
    //   })
    //   newP.then(re => { 
    //       console.log(re); // 100
    //   })
      // 用then的链式调用就 能解决回调地狱
      // 执行顺序:
      // 38行-new Promise() 赋予给p变量 (new Promise会马上执行大括号里的所有代码)
      // 39行-执行(定时器开始计时) - 但是40行不会执行(需要等待计时器到达)
      // 43行-给p绑定then函数(再未来接收异步成功结果) - 马上原地留下了一个新的Promise对象赋予newP变量(pending状态)
      // 47行-给newP绑定then函数()-里面不会执行(必须等待上一个异步任务的结果来触发)
      // js主线程就跑完了
      // 2秒后-setTimeout触发
      // 40行- resolve() 通知当前Promise对象状态为 fulFilled(兑现成功) -> 当前Promise的then()里的函数执行
      // 44行执行了
      // 45行 return的值会返回给下一个Proimise对象(当前Promise.then()返回的那个Promise对象) - then函数执行
      // 48行 接到100的值打印

      // (2): 异步失败的情况
      let p = new Promise((resolve, reject) => {
          setTimeout(() => {
            //   resolve('成功了')
            reject("失败了")
          }, 2000)
      })

      let newP = p.then(res => {
          console.log(res); // '成功了'
          return 100;
      }).catch(err => {
          console.error(err)
          return 999; // return的结果默认就是 Promise.resolve(999) - 相当于resolve(999)
      })

      newP.then(re => { 
          console.log(re); // 100
      })

      // 68 -> 75行catch()里的回调函数
      // 76行打印
      // 77行 return 会返回给下一个Promise的then函数
      // 结论: return的结果("如果是正常的值") 就是成功的结果, 返回给下一个Promise的then()里的函数体
      // return 一个 Promise.reject() 就进入下一个catch函数



     
    </script>
  </body>
</html>
